{
  "title":"CSS3 Multiple column layout",
  "description":"Method of flowing information in multiple columns",
  "spec":"https://www.w3.org/TR/css3-multicol/",
  "status":"cr",
  "links":[
    {
      "url":"https://dev.opera.com/articles/view/css3-multi-column-layout/",
      "title":"Dev.Opera article"
    },
    {
      "url":"https://webdesign.tutsplus.com/articles/an-introduction-to-the-css3-multiple-column-layout-module--webdesign-4934",
      "title":"Introduction page"
    },
    {
      "url":"https://www.webplatform.org/docs/css/properties/column-width",
      "title":"WebPlatform Docs"
    },
    {
      "url":"https://github.com/hamsterbacke23/multicolumn-polyfill",
      "title":"Polyfill"
    },
    {
      "url":"https://www.chromestatus.com/feature/6298909664083968",
      "title":"Chrome platform status for CSS column-fill"
    }
  ],
  "bugs":[
    {
      "description":"Firefox 1-64 does not support the properties `break-after`, `break-before`, and `break-inside`. Firefox 65-91 supports these properties, but does not support the values `avoid` (in the column context), `avoid-column`, and `avoid-page`, nor the value `column` for the properties `break-after` and `break-before`. Firefox 92+ supports these properties but does not support the value `avoid` (in the column context), nor the values `avoid-column`, `avoid-page`, and `column` for the properties `break-before` and `break-after`. See [the bug](https://bugzilla.mozilla.org/show_bug.cgi?id=775628)."
    },
    {
      "description":"In Firefox, the property `column-span` (or `-moz-column-span`) does not yet work. See [the bug](https://bugzilla.mozilla.org/show_bug.cgi?id=616436)."
    },
    {
      "description":"Chrome is reported to incorrectly calculate the container height, often breaks on margins and padding, and can display one pixel of the next column at the bottom of the previous column. Some of these issues can be solved by adding `-webkit-perspective: 1;` to the column container. This creates a new stacking context for the container, and apparently causes Chrome to (re)calculate column layout."
    },
    {
      "description":"Browsers behave differently when flowing `ol` list numbers in columns: IE and Safari display numbers only in the first column. Chrome does not display any numbers. Only Firefox behaves as expected and displays numbers in all columns."
    },
    {
      "description":"IE is reported to incorrectly break on elements across columns when having more than three columns."
    },
    {
      "description":"IE 10 has a bug where `text-shadow` doesn't work when used inside columns. See [a testcase](https://jsfiddle.net/0bwwrtda/)."
    },
    {
      "description":"Firefox does not split tables into columns."
    },
    {
      "description":"Firefox and Chrome do not support columns on the `fieldset` element. See [bug](https://bugzilla.mozilla.org/show_bug.cgi?id=727164)."
    },
    {
      "description":"Safari 5-8 is known to render columns [less evenly](https://stackoverflow.com/questions/14148078/safari-column-count-differs-from-firefox-and-chrome) than other browsers."
    },
    {
      "description":"Safari 5.1-10+ does not work as expected with `min-height`. See [a testcase](https://codepen.io/herrschuessler/pen/LNVWJE) See [bug](https://bugs.webkit.org/show_bug.cgi?id=65691)."
    }
  ],
  "categories":[
    "CSS3"
  ],
  "stats":{
    "ie":{
      "5.5":"n",
      "6":"n",
      "7":"n",
      "8":"n",
      "9":"n",
      "10":"y",
      "11":"y"
    },
    "edge":{
      "12":"y",
      "13":"y",
      "14":"y",
      "15":"y",
      "16":"y",
      "17":"y",
      "18":"y",
      "79":"a #3",
      "80":"a #3",
      "81":"a #3",
      "83":"a #3",
      "84":"a #3",
      "85":"a #3",
      "86":"a #3",
      "87":"a #3",
      "88":"a #3",
      "89":"a #3",
      "90":"a #3",
      "91":"a #3",
      "92":"a #3",
      "93":"a #3",
      "94":"a #3",
      "95":"a #3",
      "96":"a #3"
    },
    "firefox":{
      "2":"a x #1",
      "3":"a x #1",
      "3.5":"a x #1",
      "3.6":"a x #1",
      "4":"a x #1",
      "5":"a x #1",
      "6":"a x #1",
      "7":"a x #1",
      "8":"a x #1",
      "9":"a x #1",
      "10":"a x #1",
      "11":"a x #1",
      "12":"a x #1",
      "13":"a x #1",
      "14":"a x #1",
      "15":"a x #1",
      "16":"a x #1",
      "17":"a x #1",
      "18":"a x #1",
      "19":"a x #1",
      "20":"a x #1",
      "21":"a x #1",
      "22":"a x #1",
      "23":"a x #1",
      "24":"a x #1",
      "25":"a x #1",
      "26":"a x #1",
      "27":"a x #1",
      "28":"a x #1",
      "29":"a x #1",
      "30":"a x #1",
      "31":"a x #1",
      "32":"a x #1",
      "33":"a x #1",
      "34":"a x #1",
      "35":"a x #1",
      "36":"a x #1",
      "37":"a x #1",
      "38":"a x #1",
      "39":"a x #1",
      "40":"a x #1",
      "41":"a x #1",
      "42":"a x #1",
      "43":"a x #1",
      "44":"a x #1",
      "45":"a x #1",
      "46":"a x #1",
      "47":"a x #1",
      "48":"a x #1",
      "49":"a x #1",
      "50":"a x #1",
      "51":"a x #1",
      "52":"a #1",
      "53":"a #1",
      "54":"a #1",
      "55":"a #1",
      "56":"a #1",
      "57":"a #1",
      "58":"a #1",
      "59":"a #1",
      "60":"a #1",
      "61":"a #1",
      "62":"a #1",
      "63":"a #1",
      "64":"a #1",
      "65":"a #3",
      "66":"a #3",
      "67":"a #3",
      "68":"a #3",
      "69":"a #3",
      "70":"a #3",
      "71":"a #3",
      "72":"a #3",
      "73":"a #3",
      "74":"a #3",
      "75":"a #3",
      "76":"a #3",
      "77":"a #3",
      "78":"a #3",
      "79":"a #3",
      "80":"a #3",
      "81":"a #3",
      "82":"a #3",
      "83":"a #3",
      "84":"a #3",
      "85":"a #3",
      "86":"a #3",
      "87":"a #3",
      "88":"a #3",
      "89":"a #3",
      "90":"a #3",
      "91":"a #3",
      "92":"a #4",
      "93":"a #4",
      "94":"a #4",
      "95":"a #4",
      "96":"a #4",
      "97":"a #4"
    },
    "chrome":{
      "4":"a x #1 #2",
      "5":"a x #1 #2",
      "6":"a x #1 #2",
      "7":"a x #1 #2",
      "8":"a x #1 #2",
      "9":"a x #1 #2",
      "10":"a x #1 #2",
      "11":"a x #1 #2",
      "12":"a x #1 #2",
      "13":"a x #1 #2",
      "14":"a x #1 #2",
      "15":"a x #1 #2",
      "16":"a x #1 #2",
      "17":"a x #1 #2",
      "18":"a x #1 #2",
      "19":"a x #1 #2",
      "20":"a x #1 #2",
      "21":"a x #1 #2",
      "22":"a x #1 #2",
      "23":"a x #1 #2",
      "24":"a x #1 #2",
      "25":"a x #1 #2",
      "26":"a x #1 #2",
      "27":"a x #1 #2",
      "28":"a x #1 #2",
      "29":"a x #1 #2",
      "30":"a x #1 #2",
      "31":"a x #1 #2",
      "32":"a x #1 #2",
      "33":"a x #1 #2",
      "34":"a x #1 #2",
      "35":"a x #1 #2",
      "36":"a x #1 #2",
      "37":"a x #1 #2",
      "38":"a x #1 #2",
      "39":"a x #1 #2",
      "40":"a x #1 #2",
      "41":"a x #1 #2",
      "42":"a x #1 #2",
      "43":"a x #1 #2",
      "44":"a x #1 #2",
      "45":"a x #1 #2",
      "46":"a x #1 #2",
      "47":"a x #1 #2",
      "48":"a x #1 #2",
      "49":"a x #1 #2",
      "50":"a #3",
      "51":"a #3",
      "52":"a #3",
      "53":"a #3",
      "54":"a #3",
      "55":"a #3",
      "56":"a #3",
      "57":"a #3",
      "58":"a #3",
      "59":"a #3",
      "60":"a #3",
      "61":"a #3",
      "62":"a #3",
      "63":"a #3",
      "64":"a #3",
      "65":"a #3",
      "66":"a #3",
      "67":"a #3",
      "68":"a #3",
      "69":"a #3",
      "70":"a #3",
      "71":"a #3",
      "72":"a #3",
      "73":"a #3",
      "74":"a #3",
      "75":"a #3",
      "76":"a #3",
      "77":"a #3",
      "78":"a #3",
      "79":"a #3",
      "80":"a #3",
      "81":"a #3",
      "83":"a #3",
      "84":"a #3",
      "85":"a #3",
      "86":"a #3",
      "87":"a #3",
      "88":"a #3",
      "89":"a #3",
      "90":"a #3",
      "91":"a #3",
      "92":"a #3",
      "93":"a #3",
      "94":"a #3",
      "95":"a #3",
      "96":"a #3",
      "97":"a #3",
      "98":"a #3",
      "99":"a #3"
    },
    "safari":{
      "3.1":"a x #1 #2",
      "3.2":"a x #1 #2",
      "4":"a x #1 #2",
      "5":"a x #1 #2",
      "5.1":"a x #1 #2",
      "6":"a x #1 #2",
      "6.1":"a x #1 #2",
      "7":"a x #1",
      "7.1":"a x #1",
      "8":"a x #1",
      "9":"a #1",
      "9.1":"a #1",
      "10":"y",
      "10.1":"y",
      "11":"y",
      "11.1":"y",
      "12":"y",
      "12.1":"y",
      "13":"y",
      "13.1":"y",
      "14":"y",
      "14.1":"y",
      "15":"y",
      "15.1":"y",
      "TP":"y"
    },
    "opera":{
      "9":"n",
      "9.5-9.6":"n",
      "10.0-10.1":"n",
      "10.5":"n",
      "10.6":"n",
      "11":"n",
      "11.1":"y",
      "11.5":"y",
      "11.6":"y",
      "12":"y",
      "12.1":"y",
      "15":"a x #1 #2",
      "16":"a x #1 #2",
      "17":"a x #1 #2",
      "18":"a x #1 #2",
      "19":"a x #1 #2",
      "20":"a x #1 #2",
      "21":"a x #1 #2",
      "22":"a x #1 #2",
      "23":"a x #1 #2",
      "24":"a x #1 #2",
      "25":"a x #1 #2",
      "26":"a x #1 #2",
      "27":"a x #1 #2",
      "28":"a x #1 #2",
      "29":"a x #1 #2",
      "30":"a x #1 #2",
      "31":"a x #1 #2",
      "32":"a x #1 #2",
      "33":"a x #1 #2",
      "34":"a x #1 #2",
      "35":"a x #1 #2",
      "36":"a x #1 #2",
      "37":"a #3",
      "38":"a #3",
      "39":"a #3",
      "40":"a #3",
      "41":"a #3",
      "42":"a #3",
      "43":"a #3",
      "44":"a #3",
      "45":"a #3",
      "46":"a #3",
      "47":"a #3",
      "48":"a #3",
      "49":"a #3",
      "50":"a #3",
      "51":"a #3",
      "52":"a #3",
      "53":"a #3",
      "54":"a #3",
      "55":"a #3",
      "56":"a #3",
      "57":"a #3",
      "58":"a #3",
      "60":"a #3",
      "62":"a #3",
      "63":"a #3",
      "64":"a #3",
      "65":"a #3",
      "66":"a #3",
      "67":"a #3",
      "68":"a #3",
      "69":"a #3",
      "70":"a #3",
      "71":"a #3",
      "72":"a #3",
      "73":"a #3",
      "74":"a #3",
      "75":"a #3",
      "76":"a #3",
      "77":"a #3",
      "78":"a #3",
      "79":"a #3",
      "80":"a #3",
      "81":"a #3",
      "82":"a #3"
    },
    "ios_saf":{
      "3.2":"a x #1 #2",
      "4.0-4.1":"a x #1 #2",
      "4.2-4.3":"a x #1 #2",
      "5.0-5.1":"a x #1 #2",
      "6.0-6.1":"a x #1 #2",
      "7.0-7.1":"a x #1",
      "8":"a x #1",
      "8.1-8.4":"a x #1",
      "9.0-9.2":"a #1",
      "9.3":"a #1",
      "10.0-10.2":"y",
      "10.3":"y",
      "11.0-11.2":"y",
      "11.3-11.4":"y",
      "12.0-12.1":"y",
      "12.2-12.5":"y",
      "13.0-13.1":"y",
      "13.2":"y",
      "13.3":"y",
      "13.4-13.7":"y",
      "14.0-14.4":"y",
      "14.5-14.8":"y",
      "15.0-15.1":"y"
    },
    "op_mini":{
      "all":"y"
    },
    "android":{
      "2.1":"a x #1 #2",
      "2.2":"a x #1 #2",
      "2.3":"a x #1 #2",
      "3":"a x #1 #2",
      "4":"a x #1 #2",
      "4.1":"a x #1 #2",
      "4.2-4.3":"a x #1 #2",
      "4.4":"a x #1 #2",
      "4.4.3-4.4.4":"a x #1 #2",
      "96":"a #3"
    },
    "bb":{
      "7":"a x #1 #2",
      "10":"a x #1 #2"
    },
    "op_mob":{
      "10":"n",
      "11":"n",
      "11.1":"y",
      "11.5":"y",
      "12":"y",
      "12.1":"y",
      "64":"a #3"
    },
    "and_chr":{
      "96":"a #3"
    },
    "and_ff":{
      "94":"a #3"
    },
    "ie_mob":{
      "10":"y",
      "11":"y"
    },
    "and_uc":{
      "12.12":"y"
    },
    "samsung":{
      "4":"a x #1 #2",
      "5.0-5.4":"y",
      "6.2-6.4":"y",
      "7.2-7.4":"y",
      "8.2":"y",
      "9.2":"y",
      "10.1":"y",
      "11.1-11.2":"y",
      "12.0":"y",
      "13.0":"y",
      "14.0":"y",
      "15.0":"y"
    },
    "and_qq":{
      "10.4":"a #1"
    },
    "baidu":{
      "7.12":"a #1"
    },
    "kaios":{
      "2.5":"a x #1"
    }
  },
  "notes":"",
  "notes_by_num":{
    "1":"Does not support the properties `break-after`, `break-before`, and `break-inside`. WebKit- and Blink-based browsers have equivalent support with the non-standard `-webkit-column-break-*` properties, but only for the values `auto` and `always`. Firefox does not support the `break-*` properties but supports the now-obsolete `page-break-*` properties in the paging (printing) context.",
    "2":"Does not support the `column-fill` property.",
    "3":"Does not support the values `avoid` (in the column context), `avoid-column`, and `avoid-page` for the properties `break-after`, `break-before`, and `break-inside`; does not support the value `column` for the properties `break-after` and `break-before`.",
    "4":"Does not support the values `avoid` (in the column context) for the properties `break-after`, `break-before`, and `break-inside`; does not support the values `avoid-column`, `avoid-page`, and `column` for the properties `break-before` and `break-after`."
  },
  "usage_perc_y":23.99,
  "usage_perc_a":75.67,
  "ucprefix":false,
  "parent":"",
  "keywords":"column-count,column-width,column-gap,column-rule,column-rule-type,column-span,column-fill,break-before,break-after,break-inside",
  "ie_id":"multicolumnfullsupport",
  "chrome_id":"6526151266664448,5630943616303104",
  "firefox_id":"css-multicol",
  "webkit_id":"",
  "shown":true
}
